﻿{% extends '_layout.html' %}

{% block _head %}
    {% load static %}
    <script src="{% static 'js/echarts.min.js' %}"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
{% endblock %}

{% block main %}
    <div id="Loan_Status" style="width: 40%;height:40%;float: left;"></div>
    <div id="Gender" style="width: 40%;height:40%;float: right;"></div>
    <div id="Married" style="width: 40%;height:40%;float: left;"></div>
    <div id="Self_Employed" style="width: 40%;height:40%;float: right;"></div>
    <div id="Credit_History" style="width: 40%;height:40%;float: left;"></div>
    <div id="Dependents" style="width: 40%;height:40%;float: right;"></div>
    <div id="Education" style="width: 40%;height:40%;float: left;"></div>
    <div id="Property_Area" style="width: 40%;height:40%;float: right;"></div>
{% endblock %}

{% block script %}
    <script>
      var chartDom = document.getElementById('Loan_Status');
      var myChartLoan_Status = echarts.init(chartDom);
      let option1 = {
        title: {text: '是否能贷款'},
        xAxis: {data: ['y','n']},
        yAxis: {},
        series: [{data: [422,192],type: 'bar'}]
      };
      myChartLoan_Status.setOption(option1);
      
      var chartDom = document.getElementById('Gender');
      var myChartGender = echarts.init(chartDom);
      let option2 = {
        title: {text: '性别'},
        xAxis: {data: ['Male', 'Female']},
        yAxis: {},
        series: [{data: [502,112],type: 'bar'}]
      };
      myChartGender.setOption(option2);

      var chartDom = document.getElementById('Married');
      var myChartGender = echarts.init(chartDom);
      let option3 = {
        title: {text: '是否结婚'},
        xAxis: {data: ['Yes', 'No']},
        yAxis: {},
        series: [{data: [401, 213],type: 'bar'}]
      };
      myChartGender.setOption(option3);

      var chartDom = document.getElementById('Self_Employed');
      var myChartGender = echarts.init(chartDom);
      let option4 = {
        title: {text: '是否有工作'},
        xAxis: {data: ['No', 'Yes']},
        yAxis: {},
        series: [{data: [532, 82],type: 'bar'}]
      };
      myChartGender.setOption(option4);

      var chartDom = document.getElementById('Credit_History');
      var myChartGender = echarts.init(chartDom);
      let option5 = {
        title: {text: '信用记录'},
        xAxis: {data: [1.0, 0.0]},
        yAxis: {},
        series: [{data: [0.8, 0.1],type: 'bar'}]
      };
      myChartGender.setOption(option5);

      var chartDom = document.getElementById('Dependents');
      var myChartGender = echarts.init(chartDom);
      let option6 = {
        title: {text: '家庭情况'},
        xAxis: {data: ['0', '1', '2', '3+']},
        yAxis: {},
        series: [{data: [360, 102, 101, 51],type: 'bar'}]
      };
      myChartGender.setOption(option6);

      var chartDom = document.getElementById('Education');
      var myChartGender = echarts.init(chartDom);
      let option7 = {
        title: {text: '教育情况'},
        xAxis: {data: ['Graduate', 'Not Graduate']},
        yAxis: {},
        series: [{data: [480, 134],type: 'bar'}]
      };
      myChartGender.setOption(option7);

      var chartDom = document.getElementById('Property_Area');
      var myChartGender = echarts.init(chartDom);
      let option8 = {
        title: {text: '家庭住址'},
        xAxis: {data: ['Semiurban', 'Urban', 'Rural']},
        yAxis: {},
        series: [{data: [233, 202, 179],type: 'bar'}]
      };
      myChartGender.setOption(option8);

    </script>
{% endblock %}